import React, {PureComponent} from 'react';
import {
	Image,
	StyleSheet,
	Text,
	TextInput,
	View,
	Dimensions, TouchableOpacity, ScrollView
} from 'react-native';

// 屏幕宽度
const {width: WIDTH} = Dimensions.get('window');
// 引入组件
let TopView = require('./TopView');

/**
 * @FileName: Home
 * @Author: mazaiting
 * @Date: 2018/6/14
 * @Description:
 */
class Home extends PureComponent {
	/**
	 * 导航器属性设置
	 */
	static navigationOptions = {
		title: 'Home',
		// 隐藏导航栏
		header: null,
		// 设置标题居中
		// headerTitleStyle: {
		// 	flex: 1,
		// 	textAlign: 'center'
		// }
	};
	
	render() {
		return (
			<View style={styles.container}>
				{/*首页的导航条*/}
				{this.renderNavBar()}
				{/*首页的主要内容*/}
				<ScrollView>
					{/*头部的view*/}
					<TopView />
				</ScrollView>
			</View>
		)
	}
	
	/**
	 * 渲染导航条
	 */
	renderNavBar() {
		return (
			<View style={styles.navBarStyle}>
				{/*首页的导航条*/}
				<TouchableOpacity
					onPress={() => {
						alert('广州')
					}}
				>
					<Text style={{color: 'white'}}>广州</Text>
				</TouchableOpacity>
				{/*中间*/}
				<TextInput
					placeholder='输入商家，品类，商圈'
					style={styles.topInputStyle}
					underlineColorAndroid={'transparent'}
				/>
				{/*右边*/}
				<View style={styles.rightNavViewStyle}>
					<TouchableOpacity onPress={() => {
						alert('铃铛')
					}}>
						<Image style={styles.navRightImgStyle} source={{uri: 'icon_homepage_message'}}/>
					</TouchableOpacity>
					<TouchableOpacity onPress={() => {
						alert('铃铛')
					}}>
						<Image style={styles.navRightImgStyle} source={{uri: 'icon_homepage_scanner'}}/>
					</TouchableOpacity>
				</View>
			</View>
		)
	}
	
	pushToDetail() {
		this.props.navigation.push('HomeDetail')
	}
}

/**
 * 样式属性
 */
const styles = StyleSheet.create({
	// 父布局样式
	container: {
		flex: 1,
		backgroundColor: '#E8E8E8',
	},
	// 导航条样式
	navBarStyle: {
		height: 54,
		backgroundColor: 'rgba(255,96,0,1.0)',
		// 设置主轴方向
		flexDirection: 'row',
		// 垂直居中
		alignItems: 'center',
		// 设置主轴对齐方式
		justifyContent: 'space-around'
	},
	// 顶部输入框样式
	topInputStyle: {
		width: WIDTH * 0.75,
		height: 35,
		backgroundColor: 'white',
		borderRadius: 15,
	},
	rightNavViewStyle: {
		flexDirection: 'row',
		alignItems: 'center'
	},
	// 设置图片的大小
	navRightImgStyle: {
		width: 26,
		height: 26,
		marginRight: 10
	}
});

/**
 * 导出当前Module
 */
module.exports = Home;